<template>
  <div class="box">
    <section>
      <el-form :model="form" ref="loginList" label-width="80px" class="demo-ruleForm">
        <div class="log">
          <img src="http://8.142.74.15:9092/img/logo.f558a495.svg" alt="">
          <h3>进销存</h3>

        </div>
        <p class="ggg">开放，合作，更快更好更卓越......</p>
        <div style="margin-top: 15px;" class="xuanze">
          <p class="active">账号密码登录</p>
          <p>手机号登录</p>
        </div>
        <div style="margin-top: 15px;">
          <el-input placeholder="账号" v-model="form.username" autocomplete="off" prefix-icon="el-icon-user"></el-input>
        </div>
        <div style="margin-top: 15px;">
          <el-input placeholder="请输入密码" v-model="form.password" autocomplete="off" show-password prefix-icon="el-icon-lock"></el-input>
        </div>

        <div style="margin-top: 15px;">
          <el-input placeholder="验证码" v-model="form.captcha">
            <template slot="append"><img :src="imgurll" alt="" @click="loimg"></template>
          </el-input>
        </div>
        <div style="margin-top: 15px;">
          <el-button type="primary" @click="submitForm()">确定</el-button>
        </div>
      </el-form>
    </section>
  </div>

</template>
<script>
// import { Login } from '@/api/user';
import { Login, Yanzm } from '@/api/user';
export default {
  methods: {
    submitForm() {
      this.$refs['loginList'].validate(async (valid) => {
        if (valid) {
          // let src = `username=&pwd=&cx=`
          let src = `username=${this.form.username}&pwd=${this.form.password}&cx=${this.form.cx}&pagerandom=${this.form.pagerandom}&a=${this.form.a}&captchToken=${this.form.captchToken}`
          let res = await Login(this.form)
          console.log(res);

          if (res.code == 200) {
            localStorage.setItem('token', res.result.token)
            // this.$store.commit(cuncook)
            this.$message({ message: '登录成功', type: 'success' });
            this.$router.push({
              path: '/'
            })
          }

          if (res.code != 200) {
            this.$message.error(res.message)
            this.loimg()
          }
          // if (res.code != 0) return this.loimg()


        }
      });
    },
    async loimg() {
      console.log(Number(new Date()));
      let src = Number(new Date()) + ''
      let a = src.substring(0, 10)
      this.form.checkKey = Number(src)
      let res = await Yanzm(Number(src), Number(a))
      this.imgurll = res.result
      // console.log(this.imgurll);

    }
  },
  mounted() {
    this.loimg()
  },
  data() {
    return {

      imgurll: '',
      form: {
        username: 'admin',
        password: 'admin@Erp.',
        captcha: '',
        checkKey: 1736410635717,
        remember_me: true
      },



    }
  }
}
</script>
<style scoped>
.box {
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  background: #f0f2f5 url(http://8.142.74.15:9092/img/background.5825f033.svg) no-repeat 50%;
  background-size: 100%;
  padding: 110px 0 144px;
}

.xuanze {
  display: flex;
  justify-content: space-evenly;

  p {
    box-sizing: border-box;
    padding: 12px 16px;
    font-size: 14px;
    color: rgba(0, 0, 0, .65);
    transition: all .4s;

    &:hover {
      color: #1890ff;
    }
  }

  .active {
    color: #1890ff;
    border-bottom: 2px solid #1890ff;
  }
}

.log {
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    width: 44px;
    height: 44px;
    margin-right: 20px;
  }

  h3 {
    font-size: 33px;
    color: rgba(0, 0, 0, .85);
    font-weight: 600;
  }

}

.ggg {
  font-size: 14px;
  color: rgba(0, 0, 0, .45);
  margin-top: -14px;
  margin-bottom: 40px;
  text-align: center;

}

section {
  box-sizing: border-box;
  padding: 50px 30px;
  /* box-shadow: 1px 1px 10px 5px gray; */
  width: 500px;
  margin: 50px auto;

}

.el-button {
  /* background-color: #008080; */
  transition: all .4s;
  width: 100%;
}

.el-select {
  width: 100%;
}
</style>